<template>	
		<div class="tab-bar-item" @click="itemclick">
		<slot name='icon'></slot>
		<div :style="isActivestyle">
		<slot name='text'></slot>
		</div>				
		</div>			
</template>

<script>
	export default {
	  name: 'tabbaritem',
	  props:{
		  path:String,
		  isActivcolor:{
			  type:String,
			  default:'red'
		  }
	  },
	  components: {
	  },
	  computed:{
		  isActive(){
			  return this.$route.path.indexOf(this.path)!=-1
		  },
		  isActivestyle(){
			  return this.isActive?{color:this.isActivcolor}:{}
		  }
		 
	  },
	  methods:{
		  itemclick(){
			  this.$router.replace(this.path)
		  }
		  
	  }
	}
</script>

<style>

	.tab-bar-item{
		flex:1;
		text-align: center;
	}

</style>
